<template>
  <el-dialog :visible.sync="dialogVisible" :title="title">
    <el-form ref="forbidForm" :rules="rules" :model="formData" label-width="80px">
      <el-form-item label="解封类型" prop="operationType">
        <el-select v-model="formData.operationType" filterable>
          <el-option :value="'1'" label="解除封号" />
          <el-option :value="'3'" label="解除禁聊" />
        </el-select>
      </el-form-item>
      <el-form-item label="账户：" prop="userIds">
        <el-input
          v-model="formData.userIds"
          :disabled="!!userIds"
          type="textarea"
          placeholder="填写用户ID，一行一个"
        />
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="dialogVisible=false">取消</el-button>
      <el-button type="primary" @click="onUnForbid">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { xhrForbidAccount } from '@api/account'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    userIds: {
      type: String,
      default: null
    },
    forbidType: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      formData: {
        days: 1,
        userIds: '',
        operationType: this.forbidType
      },
      rules: {
        userIds: [{ required: true, message: '不能为空' }],
        days: [{ required: true, message: '不能为空' }],
        reason: [{ required: true, message: '不能为空' }]
      }
    }
  },
  computed: {
    title() {
      const obj = {
        0: '封号',
        1: '解除封号',
        2: '禁聊',
        3: '解除禁聊',
        batch: '批量封号'
      }
      return obj[this.forbidType]
    },
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible')
      }
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.formData.userIds = this.userIds
        this.formData.operationType =
          this.forbidType === 'batch' ? '1' : this.forbidType
      }
    }
  },
  methods: {
    onUnForbid() {
      this.$refs.forbidForm.validate(valid => {
        if (valid) {
          this.formData.userIds = (this.formData.userIds + '')
            .split('\n')
            .join(',')
          xhrForbidAccount(this.formData).then(resp => {
            if (resp.message === 'ok') {
              this.dialogVisible = false
              this.$emit('onSuccess')
            }
          })
        }
      })
    }
  }
}
</script>
